<template>
  <div class="app-container">
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
      <el-form-item prop="code" label="项目编号">
        <el-input v-model="listQuery.code" placeholder="项目编号" />
      </el-form-item>
      <el-form-item prop="name" label="项目名称">
        <el-input v-model="listQuery.name" placeholder="项目名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="Search" @click="handleFilter">
          查询
        </el-button>
      </el-form-item>
    </el-form>
    <div class="app-container">
      <el-table v-loading="listLoading"
                :data="projectTwoList"
                border
                fit
                highlight-current-row
                tooltip-effect="dark"
                style="width: 100%;margin-bottom: 20px">
        <el-table-column align="center" type="index" label="序号" width="60px" />
        <el-table-column align="center" label="二级项目编码" prop="code" min-width="155px" sortable show-overflow-tooltip>
          <template v-slot="{row}">{{ row.code }}</template>
        </el-table-column>
        <el-table-column align="center" label="二级项目名称" prop="name" min-width="105px" sortable show-overflow-tooltip>
          <template v-slot="{row}">{{ row.name }}</template>
        </el-table-column>
        <el-table-column align="center" label="项目编号" prop="code" min-width="105px" sortable show-overflow-tooltip>
          <template v-slot="{row}">{{ row.code }}</template>
        </el-table-column>
        <el-table-column align="center" label="起始年度" prop="startTime" min-width="105px" sortable show-overflow-tooltip>
          <template v-slot="{row}">{{ row.startTime }}</template>
        </el-table-column>
        <el-table-column align="center" label="终止年度" prop="endTime" min-width="105px" sortable show-overflow-tooltip>
          <template v-slot="{row}">{{ row.endTime }}</template>
        </el-table-column>
        <el-table-column align="center" label="最后修改时间" width="180px" prop="updateTime">
          <template v-slot="{row}">{{ row.updateTime }}</template>
        </el-table-column>
        <el-table-column label="操作" width="150" align="center">
          <template v-slot="{row}">
            <el-button text type="primary" @click="openProjectModel(row)">查看项目明细</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-model:total="total" v-model:page="listQuery.pageNum" v-model:limit="listQuery.pageSize" @pagination="getList" class="pagination-model" />
      <el-dialog v-model="dialogVisible" title="项目明细" width="70%" top="2vh">
        <div class="details-info">
          <el-row :gutter="20">
            <el-col :sm="24" :lg="29" style="padding-left: 20px">
              <h2>基础信息</h2>
              <el-card class="update-log">
                <div class="report-form-list-content">
                  <div class="data-item">
                    <label>一上编制编码</label>
                    <span>{{ rowObj.code }}</span>
                  </div>
                  <div class="data-item">
                    <label>一上编制名称</label>
                    <span>{{ rowObj.name }}</span>
                  </div>
                  <div class="data-item">
                    <label>存续状态</label>
                    <span><DictTag :dict-list="getDictList('BudgetProjectViability')" :dict-key="rowObj.viability" /></span>
                  </div>
                  <div class="data-item">
                    <label>项目起始年度</label>
                    <span>{{ rowObj.startTime }}</span>
                  </div>
                  <div class="data-item">
                    <label>项目终止年度</label>
                    <span>{{ rowObj.endTime }}</span>
                  </div>
                  <div class="data-item">
                    <label>项目来源</label>
                    <span><DictTag :dict-list="getDictList('BudgetProjectSource')" :dict-key="rowObj.source" /></span>
                  </div>
                  <div class="data-item">
                    <label>申报属性</label>
                    <span><DictTag :dict-list="getDictList('BudgetProjectAttribute')" :dict-key="rowObj.attribute" /></span>
                  </div>
                  <div class="data-item">
                    <label>申请财政金额</label>
                    <span>{{ rowObj.totalFund }}</span>
                  </div>
                  <div class="data-item">
                    <label>社会投入资金</label>
                    <span>{{ rowObj.putinFund }}</span>
                  </div>
                  <div class="data-item">
                    <label>当年资金</label>
                    <span>{{ rowObj.currFund }}</span>
                  </div>
                  <div class="data-item">
                    <label>用款单位</label>
                    <span>{{ showIdLabel(governmentList, rowObj.useGovId, 'governmentName') }}</span>
                  </div>
                  <div class="data-item">
                    <label>申报单位</label>
                    <span>{{ showIdLabel(governmentList, rowObj.applyGovId, 'governmentName') }}</span>
                  </div>
                  <div class="data-item">
                    <label>上一年项目预算安排情况</label>
                    <span>{{ rowObj.previousArrange }}</span>
                  </div>
                  <!-- <div class="data-item">
                    <label>主管部门</label>
                    <span>{{ showIdLabel(organizationList, props.row.managerOrgId, 'organizationName') }}</span>
                  </div> -->
                  <!-- <div class="data-item">
                    <label>主管部门联系人</label>
                    <span>{{ props.row.managerName }}</span>
                  </div>
                  <div class="data-item">
                    <label>主管部门联系电话</label>
                    <span>{{ props.row.managerUserContact }}</span>
                  </div> -->
                  <div class="data-item">
                    <label>是否债券可用项目</label>
                    <span><DictTag :dict-list="getDictList('BudgetProjectDebenture')" :dict-key="rowObj.isDebenture" /></span>
                  </div>
                  <div class="data-item">
                    <label>是否科研项目</label>
                    <span><EnumTag :enum-list="getEnumList('CommonYesNo')" :enum-key="rowObj.isScientific" /></span>
                  </div>
                </div>
                <div class="data-item data-item-1">
                  <label>项目概述</label>
                  <span>{{ rowObj.summarize }}</span>
                </div>
                <div class="data-item data-item-1">
                  <label>设立依据及申报理由</label>
                  <span>{{ rowObj.summarize }}</span>
                </div>
                <div class="report-form-list-content">
                  <!-- <div class="data-item">
                    <label>项目总额</label>
                    <span>{{ props.row.system }}</span>
                  </div> -->
                  <div class="data-item">
                    <label>是否基建项目</label>
                    <span><EnumTag :enum-list="getEnumList('CommonYesNo')" :enum-key="rowObj.isConstruction" /></span>
                  </div>
                </div>
              </el-card>
              <el-card class="update-log" v-if="rowObj.isConstruction === '1'">
                <label class="form-label">基建类项目信息:</label>
                <div class="form-list-content">
                  <div class="data-item">
                    <label>基建立项情况</label>
                    <span><DictTag :dict-list="getDictList('BudgetProjectConstruction')" :dict-key="rowObj.constructionDesc" /></span>
                  </div>
                  <div class="data-item">
                    <label>是否代建项目</label>
                    <span><EnumTag :enum-list="getEnumList('CommonYesNo')" :enum-key="rowObj.isAgent" /></span>
                  </div>
                  <div class="data-item" v-if="rowObj.isAgent === '1'">
                    <label>代建单位</label>
                    <span>{{ showIdLabel(governmentList, rowObj.agentGovId, 'governmentName') }}</span>
                  </div>
                </div>
              </el-card>

              <h2>分年度资金计划</h2>
              <el-card class="update-log">
                <div v-if="years.length > 0">
                  <div v-for="(item,index) in years" :key="index">
                    <label class="form-label">{{item.year}}年度</label>
                    <div class="report-form-list-content">
                      <div class="data-item">
                        <label>单位申报数</label>
                        <span>{{ item.applyFund }}</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-else>
                  暂无年度资金计划
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
        <div style="text-align:right;">
          <el-button type="info" icon="Close" @click="dialogVisible = false">关闭</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import {ref, onMounted} from 'vue'
import {doGet} from "@/config/http"
import {svc, showIdLabel, getListPageSize, getEnumList, getDictList} from "@/config/common"
import Pagination from "@/components/Pagination/index.vue";
import initListStore from '@/store/modules/initList'

const props = defineProps({
  radioNum: {
    required: false,
    type: String,
  }
})
let projectTwoList = ref([])
let listLoading = ref(true)
let total = ref(0)
let years = ref([])
let rowObj = ref(null)
let dialogVisible = ref(false)
// 单位列表
let governmentList = initListStore().governmentList
// 主管部门
let organizationList = initListStore().organizationList
let listQuery = ref({
  pageNum: 1,
  pageSize: 10,
  sortField: 'id',
  sortType: 'desc',
  projectOneId: null,
  code: null,
  name: null,
  viability: null,
  source: null,
  attribute: null,
  totalFund: null,
  putinFund: null,
  currFund: null,
  useGovId: null,
  applyGovId: null,
  previousArrange: null,
  managerOrgId: null,
  managerName: null,
  managerUserContact: null,
  workGovId: null,
  workUserId: null,
  workUserContact: null,
  state: null,
  startTime: null,
  endTime: null,
  isDebenture: null,
  isScientific: null,
  isConstruction: null,
  constructionDesc: null,
  isAgent: null,
  agentGovId: null,
  scientificDesc: null,
  scientificType: null,
  isGovernmentPurchase: null,
  purchaseProject: null,
  purchaseKind: null,
  purchaseRequire: null,
  purchaseDateStart: null,
  purchaseDateEnd: null,
  purchaseAttr: null,
  purchaseFund: null,
  purchasePrice: null,
  purchaseNum: null,
  purchaseUnit: null,
  ysySync: null,
  createTimeStart: null,
  createTimeEnd: null,
  updateTimeStart: null,
  updateTimeEnd: null,
})

const emit = defineEmits(['openProjectKpi'])

// 获取下拉框数据列表
// async function initList() {
//   let p1 = doGet(svc, '/government/page', {pageSize: getListPageSize()}, false)
//   let p2 = doGet(svc, '/organization/page', {pageSize: getListPageSize()}, false)
//   let resArray = await Promise.all([p1, p2])
//   // 单位列表
//   governmentList.value = resArray[0]['records']
//   // 主管部门
//   organizationList.value = resArray[1]['records']
// }

onMounted(async () => {
  await getList()
  // await initList()
})

// 获取数据
async function getList() {
  listLoading.value = true
  let res = await doGet(svc, '/budget-one/page', listQuery.value)
  listLoading.value = false
  total.value = parseInt(res['total'])
  projectTwoList.value = res['records']
}

// 查询
async function handleFilter() {
  listQuery.value['pageNum'] = 1
  await getList()
}

async function openProjectModel(row) {
  rowObj.value = row
  let p1 = doGet(svc, '/budget-one-year/listByField', {field: 'budgetOneId', values: row.id}, false)
  let resArray = await Promise.all([p1])
  years.value = resArray[0]
  dialogVisible.value = true
}

</script>
<style>
.selectItems .el-radio__input.is-checked .el-radio__inner {
  border-color: #6222c2 !important;
    /* background: #6222c2 !important; */
}
.el-radio.is-bordered.is-checked{
    /* background: #6222c2; */
}
.report-form-content-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.file-list-btn {
  display: flex;
  /* display: flex; */
  align-items: center;
  justify-content: space-between
}
.report-form-list-content .el-form-item__label {
  width: 100px !important;
}
.el-form-item__label {
  width: 100px !important;
}
.report-form-list-content {
  display: flex;
  flex-wrap: wrap;
}
.details-info {
  padding: 20px;
}
.form-label {
  display: inline-flex;
  justify-content: flex-end;
  align-items: flex-start;
  flex: 0 0 auto;
  /* font-size: var(--el-form-label-font-size); */
  font-size: 16px;
  /* color: var(--el-text-color-regular); */
  color: #337ecc;
  height: 32px;
  line-height: 32px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  width: 200px;
  font-weight: bold;
}
.update-log {
  width: 100%;
  margin-bottom: 30px;
}
.update-log-1 {
  margin-top: 0;
}
.select-list {
  width: 100%;
  margin: 30px 0;
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
}
.select-list .el-radio-group {
  margin-right: 30px;
}
.select-list .el-button {
  margin-left: 30px;
}
.add-indexs {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.upload-demo {
  margin-right: 20px;
}
.file-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
}
.file-list-btns {
  display: flex;
  align-items: center;
}
.file-list-btn-span {
  color: #F56C6C;
  font-size: 12px;
}
.data-item {
  width: 400px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin: 10px 0;
  font-size: 16px;
}
.data-item-1 {
  width: 100%;
  align-items:flex-start
}

.data-item label {
  width: 200px;
  text-align: right;
}
.data-item span {
  padding-left: 15px;
  display: inline-block;
  width: 75%;
}
</style>
